<template>
  <div class="box">
    <BorderTitle>热门歌手</BorderTitle>
    <ul class="ul">
      <li v-for="s in artistsList" :key="s.id">
        <ArtistsList :item="s"></ArtistsList>
      </li>
    </ul>
    <Loading v-if="artistsList == null"></Loading>
  </div>
</template>

<script>
import BorderTitle from "@/components/BorderTitle";
import ArtistsList from "@/components/ArtistsList";
import Loading from "@/components/myLoading";
export default {
  data() {
    return {
      artistsList: null,
    };
  },
  components: {
    BorderTitle,
    ArtistsList,
    Loading,
  },
  created() {
    this.$axios.get("/top/artists?offset=0&limit=30").then((data) => {
      this.artistsList = data.data.artists;
    });
  },
};
</script>

<style lang="less" scoped>
.ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  li {
    width: 32%;
    // margin-right: 10px;
    &:nth-of-type(3n + 3) {
      margin-right: 10px;
    }
  }
}
</style>